import React, { useState, useRef } from "react";
import { Player, ControlBar } from "video-react";
import "video-react/dist/video-react.css";
const my_1 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/h_1.png";
const my_2 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/h_2.png";
const s_top = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/h_top.png";
const X = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/x.png";
const bo_img = require("./img/bo_img.jpg").default;
function Home() {
  const player1 = useRef(null);
  const [p1, setP1] = useState(false);
  const [list] = useState([
    {
      img: my_1,
      name: "报名",
      url: "https://live.photoplus.cn/live/48547510",
    },
    // {
    //   img: my_2,
    //   name: "视频1",
    // },
  ]);
  return (
    <div className="home my">
      <div className="back">
        <img
          onClick={() => {
            history.go(-1);
          }}
          src={X}
        />
      </div>
      <div className="ban1">
        <img src={s_top} />
      </div>
      <div className="home_main my_main">
        <div className="home_con">
          <div className="my_con_all">
            {list?.map((item, index) => {
              return (
                <div key={index}>
                  <img
                    onClick={() => {
                      if (item.name == "报名") {
                        window.location.href = item.url
                        // setIsF(true);
                      }
                      if (item.name == "视频1") {
                        setP1(true);
                      }
                    }}
                    src={item.img}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </div>
      {p1 && (
        <div className="iframe_box">
          <div className="back" style={{ zIndex: 100909 }}>
            <img
              onClick={() => {
                setP1(false);
              }}
              src={X}
            />
          </div>
          <div className="iframe">
            <Player ref={player1} preload="none" poster={bo_img}>
              <ControlBar autoHide={false} className="my-class" />
              <source
                src={
                  "?time=" +
                  new Date().getTime()
                }
              />
            </Player>
          </div>
        </div>
      )}
    </div>
  );
}

export default Home;
